<template>
	<view class="container">
		<!-- 头部信息 -->
		<view class="header" :style="{ marginTop: statusBarHeight + 30 + 'px' }">
			<!-- 头像 -->
			<view class="avatar" @tap="previewAvatar">
				<image :src="getCurrentDriverAvatarOrDefault()" mode="aspectFill"></image>
			</view>
			<!-- 名称 -->
			<view class="name-container">
				<view class="name">
					<text v-if="driver.getCurrentDriver().auditStatus === auditStatusEnum.PASS.value">
						{{ driver.getCurrentDriver().surname + driver.getCurrentDriver().name }}
					</text>
					<text v-else>
						司机{{ driver.getCurrentDriver().phone ? substringSuffix(driver.getCurrentDriver().phone, 4) : '' }}
					</text>
					<text class="vip" @tap="gotoNextPage('to-be-vip')">
						<uni-icons custom-prefix="iconfont" type="icon-VIP" size="28" :color="getVipColorByDriver()"></uni-icons>
					</text>
				</view>
				<view class="id">
					ID:{{ driver.getCurrentDriver().id }}
				</view>
			</view>
			<!-- 通知 -->
			<view class="setting" @tap="gotoNextPage('notice-list')">
				<uni-icons type="email" size="28"></uni-icons>
				<view class="dot" v-if="!read"></view>
			</view>
			<!-- 设置 -->
			<view class="setting" @tap="gotoNextPage('mine-info')">
				<uni-icons type="gear" size="30"></uni-icons>
			</view>
		</view>

		<!-- 余额与提现 -->
		<view class="box balance-and-withdraw">
			<view class="left">
				<view class="up">
					账户余额（元）
				</view>
				<view class="down">
					{{ driver.getCurrentDriver().accountBalance ? formatAmount(driver.getCurrentDriver().accountBalance) : '0.0' }}
				</view>
			</view>
			<view class="right">
				<view class="primary-btn btn" @tap="gotoNextPage('withdraw')">
					立即提现
				</view>
			</view>
		</view>
		
		<!-- 收益 -->
		<view class="box balance-abstract">
			<view class="balance-item">
				<view class="up">
					{{ formatAmount(driver.incomes.todayIncome) }}
				</view>
				<view class="down">
					今日收益
				</view>
			</view>
			<view class="balance-item">
				<view class="up">
					{{ formatAmount(driver.incomes.monthIncome) }}
				</view>
				<view class="down">
					本月收益
				</view>
			</view>
			<view class="balance-item">
				<view class="up">
					{{ formatAmount(driver.incomes.totalIncome) }}
				</view>
				<view class="down">
					累计收益
				</view>
			</view>
			<view class="balance-item">
				<view class="up">
					{{ formatAmount(driver.incomes.totalWithdraw) }}
				</view>
				<view class="down">
					累计提现
				</view>
			</view>
		</view>
		
		<!-- 选项按钮 -->
		<view class="box options">
			<view class="option-item" v-for="(item, idx) in optionList" :key="idx" @tap="gotoNextPage(item.to)">
				<view class="up">
					<uni-icons custom-prefix="iconfont" :type="item.icon" size="25" color="#38b3ec"></uni-icons>
				</view>
				<view class="down">
					{{ item.label }}
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onPullDownRefresh, onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/userStore.js'
import { getGenderNameByCode, getDriverCarNameByCode, auditStatusEnum } from '@/utils/enums.js'
import { substringSuffix } from '@/utils/stringUtil.js'
import { formatAmount } from '@/utils/amountUtil.js'
import { getCurrentDriverAvatarOrDefault } from '@/utils/imageUtil.js'
import { hasReadNotices } from '@/api/notice.js'
import { getVipColorByDriver } from '@/utils/commonUtil.js'

const driver = useUserStore()

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight

const optionList = ref([
	{
		icon: 'icon-lijichongzhi',
		label: '立即充值',
		to: 'recharge'
	},
	{
		icon: 'icon-chongzhijilu',
		label: '充值记录',
		to: 'recharge-list'
	},
	{
		icon: 'icon-tixianjilu',
		label: '提现记录',
		to: 'withdraw-list'
	},
	{
		icon: 'icon-zijinmingxi',
		label: '资金明细',
		to: 'balance-list'
	},
	
	{
		icon: 'icon-wodexiaxian',
		label: '我的下线',
		to: 'children-list'
	},
	{
		icon: 'icon-yaoqinghaoyou',
		label: '邀请好友',
		to: 'qrcode'
	},
	{
		icon: 'icon-lianxikefu',
		label: '联系客服',
		to: 'call'
	},
	{
		icon: 'icon-daijiabaoxian',
		label: '代驾保险',
		to: 'insurance'
	},
	{
		icon: 'icon-VIP',
		label: '开通会员',
		to: 'to-be-vip'
	}
])

const read = ref(true)

// 预览头像
function previewAvatar () {
	uni.previewImage({
		urls: [getCurrentDriverAvatarOrDefault()],
		current: 0
	})
}

// 跳转到其他页面
function gotoNextPage (url) {
	if (url === 'call') {
		uni.makePhoneCall({
			phoneNumber: '13544465541'
		})
	} else {
		uni.navigateTo({
			url: `/pages/mine/${url}`
		})
	}
}

// 下拉刷新
onPullDownRefresh(() => {
	driver.refreshCurrentDriver().then(res => {
		uni.showToast({
			icon: 'none',
			title: '刷新成功'
		})
	}).finally(() => {
		uni.stopPullDownRefresh()
	})
	
	hasReadNotices().then(res => {
		// console.log(res)
		read.value = res.data
	})
})

// 
onShow(() => {
	hasReadNotices().then(res => {
		// console.log(res)
		read.value = res.data
	})
})

</script>

<style lang="scss" scoped>
view {
	box-sizing: border-box;
}
.container {
	padding: 30rpx;
	min-height: 100vh;
	
	background: // 上面的层级更高
		linear-gradient(to bottom, transparent, #f8f8f8 430rpx), // 从上到下，由透明色变为白色
		linear-gradient(to right, #44c0ec 20%, #dbf4db);      // 从左到右

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.avatar {
			width: 140rpx;
			height: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			border: 3rpx solid #fff;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.name-container {
			flex: 1;
			padding: 0 30rpx;
			.name {
				color: #000;
				font-size: 36rpx;
				display: flex;
				align-items: center;
				.vip {
					padding: 10rpx 20rpx 10rpx 10rpx;
				}
			}
			.id {
				color: #333;
				font-size: 24rpx;
			}
			
		}
		.setting {
			padding: 0 30rpx;
			padding-right: 0;
			position: relative;
			.dot {
				position: absolute;
				right: -4rpx;
				top: 2rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #f00;
			}
		}
		
	}

	.box {
		margin-top: 30rpx;
		padding: 30rpx 0;
		border-radius: 30rpx;
		background-color: #fff;
		// box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.03);
	}

	.balance-and-withdraw {
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left {
			.up {
				color: #888;
				margin-bottom: 15rpx;
			}
			.down {
				color: $uni-color-primary;
				font-size: 50rpx;
				font-weight: 600;
			}
		}
		.right {
			.btn {
				padding: 20rpx 30rpx;
				border-radius: 50rpx;
			}
		}
	}
	
	.balance-abstract {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		.balance-item {
			// flex: 1;
			
			&>view {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.up {
				color: #555;
			}
			.down {
				margin-top: 10rpx;
				color: #666;
				font-size: 28rpx;
			}
		}
	}
	
	.options {
		padding-left: 30rpx;
		padding-right: 30rpx;
		
		display: grid;
		grid-template-columns: repeat(4, 1fr); /* 4列 */
		gap: 30rpx;
		.option-item {
			&>view {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.up {
				
			}
			.down {
				margin-top: 20rpx;
				color: #666;
				font-size: 28rpx;
			}
		}
	}
	
}
</style>